<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>过滤器</title>
    <script src="../commonjs/vue.js"></script>
    <script src="../commonjs/dayjs.min.js"></script>
</head>
<body>
    <div id="root">
        <h2>显示格式化后的时间</h2>
        <!--计算属性实现-->
        <h2>计算属性:{{fmtTime}}</h2><br>
        <!--自动以方法实现-->
        <h2>方法实现:{{fmttime}}</h2>
        <button @click="formatTime">格式化当前时间</button>
        <!--过滤器实现-->
        <h2>过滤器:{{time | timeFormatter}}</h2>
        <!--过滤器传参-->
        <h2>过滤器传参:{{time | timeFormatter('YYYY_MM_DD HH:mm:ss')}}</h2>
        <!--过滤器串联 ：只要年份-->
        <h2>只要年份:{{time | timeFormatter('YYYY_MM_DD HH:mm:ss') | fmtYear}}</h2>
    </div>
    <div id="root2">
        <h2>{{time}}</h2>
        <h2>全局过滤器:{{msg | mySlice}}</h2>
    </div>
    <script>
        Vue.config.productionTip = false;//关闭开发提示
        //全局过滤器
        Vue.filter('mySlice',function (value){
            return value.slice(0,4)
        })
        new Vue({
            el:'#root',
            data:{
                time:Date.now(),
                fmttime:''
            },
            computed:{
                fmtTime(){
                    return dayjs(this.time).format('YYYY-MM-DD HH:mm:ss')
                }
            },
            methods:{
                formatTime(){
                    this.fmttime = dayjs(this.time).format('YYYY-MM-DD HH:mm:ss')
                }
            },
            //局部过滤器
            filters:{
                //名称相同的过滤器是可以公用的
/*                timeFormatter(time){
                    console.log("filter",time)
                    return  dayjs(time).format('YYYY-MM-DD HH:mm:ss')
                },*/ //不传参的过滤器
                timeFormatter(time,fmt='YYYY年MM月DD日 HH:mm:ss'){ //fmt是默认值 上面过滤器不传参直接使用这个默认值 传参则使用传过来的参数
                    return dayjs(time).format(fmt)
                }, //传参的过滤器
                fmtYear(value){
                    return value.slice(0,4)
               }
            }
        })

        new Vue({
            el:'#root2',
            data(){
                return{
                    msg:'Hello World!'
                }
            }
        })
    </script>
</body>
</html>